<template>
  <div class="exam-config-container">
    <!-- 左侧导航菜单 -->
    <div class="nav-menu">
      <div class="menu-title">考试配置</div>
      <ul class="menu-list">
        <li :class="{ active: activeMenu === 'basic' }" @click="activeMenu = 'basic'">基本设置</li>
        <li :class="{ active: activeMenu === 'permission' }" @click="activeMenu = 'permission'">权限配置</li>
        <!-- <li :class="{ active: activeMenu === 'anti-cheating' }" @click="activeMenu = 'anti-cheating'">防作弊配置</li> -->
        <!-- <li :class="{ active: activeMenu === 'answer' }" @click="activeMenu = 'answer'">答题模式</li>-->
        <!-- <li :class="{ active: activeMenu === 'proctor' }" @click="activeMenu = 'proctor'">监考配置</li>  -->
        <li :class="{ active: activeMenu === 'reading' }" @click="activeMenu = 'reading'">阅卷配置</li>
        <li :class="{ active: activeMenu === 'result' }" @click="activeMenu = 'result'">考试结果展示</li>
      </ul>
    </div>

    <!-- 中间配置表单区域 -->
    <div class="config-form">
      <!-- 基本设置 -->
      <div v-if="activeMenu === 'basic'" class="config-section">
        <div class="form-group">
          <div class="form-label"><span class="required">*</span>考试名称</div>
          <div class="form-input">
            <input type="text" v-model="examName" placeholder="请输入考试名称" />
          </div>
        </div>

        <div class="form-group">
          <div class="form-label"><span class="required">*</span>考试类型</div>
          <div class="form-input">
            <select v-model="examType">
              <option value="">选择考试类型</option>
              <option value="1">线上考试</option>
              <option value="2">线下考试</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label"><span class="required">*</span>考试时间</div>
          <div class="form-input time-range">
            <div class="time-input">
              <span class="time-icon">⌚</span>
              <input
                type="datetime-local"
                v-model="startTime"
                placeholder="开始时间"
                class="datetime-input"
                @change="validateTimeRange"
              />
            </div>
            <span class="time-separator">至</span>
            <div class="time-input">
              <input
                type="datetime-local"
                v-model="endTime"
                placeholder="结束时间"
                class="datetime-input"
                @change="validateTimeRange"
              />
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label"><span class="required">*</span>及格分</div>
          <div class="form-input number-input">
            <button class="btn-decrease" @click="decreasePassingScore">-</button>
            <input
              type="number"
              v-model="passingScore"
              @input="validateInteger('passingScore')"
              min="0"
            />
            <button class="btn-increase" @click="increasePassingScore">+</button>
            <span class="help-icon">?</span>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label"><span class="required">*</span>考试时长</div>
          <div class="form-input number-input">
            <button class="btn-decrease" @click="decreaseExamDuration">-</button>
            <input
              type="number"
              v-model="examDuration"
              @input="validateInteger('examDuration')"
              min="0"
            />
            <button class="btn-increase" @click="increaseExamDuration">+</button>
            <span class="help-icon">?</span>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label"><span class="required">*</span>限考次数</div>
          <div class="form-input number-input">
            <button class="btn-decrease" @click="decreaseAttemptLimit">-</button>
            <input
              type="number"
              v-model="attemptLimit"
              @input="validateInteger('attemptLimit')"
              min="1"
            />
            <button class="btn-increase" @click="increaseAttemptLimit">+</button>
            <span class="help-icon">?</span>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">最低交卷时长</div>
          <div class="form-input number-input">
            <button class="btn-decrease" @click="decreaseMinSubmitTime">-</button>
            <input
              type="number"
              v-model="minSubmitTime"
              @input="validateInteger('minSubmitTime')"
              min="0"
            />
            <button class="btn-increase" @click="increaseMinSubmitTime">+</button>
            <span class="help-icon">?</span>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">允许迟到时长</div>
          <div class="form-input number-input">
            <button class="btn-decrease" @click="decreaseLateTime">-</button>
            <input
              type="number"
              v-model="lateTime"
              @input="validateInteger('lateTime')"
              min="0"
            />
            <button class="btn-increase" @click="increaseLateTime">+</button>
            <span class="help-icon">?</span>
          </div>
        </div>
      </div>

          <!-- 权限配置 -->
          <div v-if="activeMenu === 'permission'" class="config-section">
        <div class="section-title">权限配置</div>

        <div class="form-group">
          <div class="form-label"><span class="required">*</span>考试开放类型</div>
          <div class="form-input">
            <div class="radio-group">
              <label class="radio-item">
                <input type="radio" v-model="accessType" value="open" name="accessType" />
                <span class="radio-label">完全开放</span>
                <span class="radio-desc">任何人都可以参加考试，无需密码或邀请</span>
              </label>

              <label class="radio-item">
                <input type="radio" v-model="accessType" value="password" name="accessType" />
                <span class="radio-label">密码类考试</span>
                <span class="radio-desc">参加考试需要输入密码</span>
              </label>

              <label class="radio-item">
                <input type="radio" v-model="accessType" value="invite" name="accessType" />
                <span class="radio-label">私有邀请</span>
                <span class="radio-desc">只有被邀请的用户才能参加考试</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 密码类考试的额外设置 -->
        <div v-if="accessType === 'password'" class="form-group">
          <div class="form-label"><span class="required">*</span>考试密码</div>
          <div class="form-input">
            <input type="password" v-model="examPassword" placeholder="请设置考试密码" />
            <div class="form-tip">密码将在考试开始前发送给考生</div>
          </div>
        </div>

        <!-- 私有邀请的额外设置 -->
        <div v-if="accessType === 'invite'" class="form-group">
          <div class="form-label"><span class="required">*</span>邀请方式</div>
          <div class="form-input">
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" v-model="inviteOptions.email" />
                <span>邮件邀请</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="inviteOptions.sms" />
                <span>短信邀请</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="inviteOptions.link" />
                <span>链接邀请</span>
              </label>
            </div>
          </div>
        </div>

        <div v-if="accessType === 'invite'" class="form-group">
          <div class="form-label">邀请名单</div>
          <div class="form-input">
            <div class="invite-list-container">
              <div class="invite-list-header">
                <button class="btn-add-invite" @click="showAddInviteModal = true">
                  <span class="icon-add">+</span> 添加考生
                </button>
                <div class="invite-search">
                  <input type="text" placeholder="搜索考生" v-model="inviteSearchText" />
                </div>
              </div>

              <div class="invite-list">
                <table class="invite-table">
                  <thead>
                    <tr>
                      <th>姓名</th>
                      <th>邮箱/手机</th>
                      <th>邀请状态</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(person, index) in filteredInviteList" :key="index">
                      <td>{{ person.name }}</td>
                      <td>{{ person.contact }}</td>
                      <td>
                        <span :class="['status-badge', `status-${person.status}`]">
                          {{ getStatusText(person.status) }}
                        </span>
                      </td>
                      <td>
                        <button class="btn-action" @click="resendInvite(index)">重发</button>
                        <button class="btn-action btn-delete" @click="removeInvite(index)">删除</button>
                      </td>
                    </tr>
                    <tr v-if="filteredInviteList.length === 0">
                      <td colspan="4" class="no-data">暂无邀请记录</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 防作弊配置
      <div v-if="activeMenu === 'anti-cheating'" class="config-section">
        <div class="section-title">防作弊配置</div>
        <div class="empty-content">
          <p>此处显示防作弊配置相关内容</p>
        </div>
      </div> -->

      <!-- 答题模式
      <div v-if="activeMenu === 'answer'" class="config-section">
        <div class="section-title">答题模式</div>
        <div class="empty-content">
          <p>此处显示答题模式相关内容</p>
        </div>
      </div> -->

      <!-- 监考配置
      <div v-if="activeMenu === 'proctor'" class="config-section">
        <div class="section-title">监考配置</div>
        <div class="empty-content">
          <p>此处显示监考配置相关内容</p>
        </div>
      </div> -->

      <!-- 阅卷配置 -->
      <div v-if="activeMenu === 'reading'" class="config-section">
        <div class="section-title">阅卷配置</div>
        <div class="empty-content">
          <p>此处显示阅卷配置相关内容</p>
        </div>
      </div>

      <!-- 考试结果展示 -->
      <div v-if="activeMenu === 'result'" class="config-section">
        <div class="section-title">考试结果展示</div>
        <div class="empty-content">
          <p>此处显示考试结果展示相关内容</p>
        </div>
      </div>


      <div class="form-actions">
        <button @click="saveAll()" class="btn-save">保存</button>
      </div>
    </div>

    <!-- 右侧试卷信息 -->
    <div class="exam-info">
      <div class="info-title">试卷信息</div>
      <div class="info-content">
        <div class="info-item">
          <span class="info-label">试卷标题：</span>
          <span class="info-value">{{ examInfo.paperName }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">试卷总分：</span>
          <span class="info-value">{{ examInfo.score }}</span>
        </div>
        <!-- <div class="info-item">
          <span class="info-label">试题数量：</span>
          <span class="info-value">{{ examInfo.questionCount }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">组卷方式：</span>
          <span class="info-value">{{ examInfo.paperType }}</span>
        </div> -->
        <!-- <div class="info-item">
          <span class="info-label">人工批阅：</span>
          <span class="info-value">{{ examInfo.manualReview ? '是' : '否' }}</span>
        </div> -->
        <!-- <div class="info-item">
          <span class="info-label">出卷人员：</span>
          <span class="info-value">{{ examInfo.creator }}</span>
        </div> -->
        <div class="info-item">
          <span class="info-label">创建时间：</span>
          <span class="info-value">{{ examInfo.createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, watch ,computed} from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { ExamService } from '@/api/exam';
import { Save } from 'lucide-vue-next';

const router=useRouter();
const route=useRoute();
// 定义props接收试卷信息
// const props = defineProps({
//   // 如果没有传入examInfoData，则使用默认值
//   examInfoData: {
//     type: Object,
//     default: () => ({})
//   }
// });

// 活动菜单项
const activeMenu = ref('basic');

// 表单数据
const examName = ref('');
const examType = ref('');
const startTime = ref('');
const endTime = ref('');
const passingScore = ref('6');
const examDuration = ref('30');
const attemptLimit = ref('1');
const minSubmitTime = ref('0');
const lateTime = ref('0');
const currentPaperId=ref();
// 试卷信息 - 动态数据
const examInfo = reactive({
  paperName: '23',
  score: 10,
  questionCount: 1,
  paperType: '选题组卷',
  manualReview: false,
  creator: '超管A',
  createTime: '2025-02-26 15:49:54'
});

const accessType = ref('open'); // 默认完全开放
const examPassword = ref(''); // 考试密码
const inviteOptions = reactive({
  email: true,
  sms: false,
  link: false
});


// 邀请名单
const inviteList = ref([
  { name: '张三', contact: 'zhangsan@example.com', status: 'sent' },
  { name: '李四', contact: '13800138000', status: 'pending' },
  { name: '王五', contact: 'wangwu@example.com', status: 'accepted' }
]);
const inviteSearchText = ref('');
const showAddInviteModal = ref(false);
const newInvite = reactive({
  name: '',
  contact: ''
});
const filteredInviteList = computed(() => {
  if (!inviteSearchText.value) return inviteList.value;

  return inviteList.value.filter(person =>
    person.name.includes(inviteSearchText.value) ||
    person.contact.includes(inviteSearchText.value)
  );
});

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'sent': '已发送',
    'pending': '待发送',
    'accepted': '已接受'
  };
  return statusMap[status] || status;
};
// 添加邀请
const addInvite = () => {
  if (newInvite.name && newInvite.contact) {
    inviteList.value.push({
      name: newInvite.name,
      contact: newInvite.contact,
      status: 'pending'
    });

    // 重置表单
    newInvite.name = '';
    newInvite.contact = '';
    showAddInviteModal.value = false;
  }
};

// 重发邀请
const resendInvite = (index) => {
  const person = filteredInviteList.value[index];
  // 实际应用中这里会调用API重发邀请
  // 这里仅做状态更新示例
  const realIndex = inviteList.value.findIndex(p => p.name === person.name && p.contact === person.contact);
  if (realIndex !== -1) {
    inviteList.value[realIndex].status = 'sent';
  }
};

// 删除邀请
const removeInvite = (index) => {
  const person = filteredInviteList.value[index];
  const realIndex = inviteList.value.findIndex(p => p.name === person.name && p.contact === person.contact);
  if (realIndex !== -1) {
    inviteList.value.splice(realIndex, 1);
  }
};



const loadExamPaper = async (id) => {
   const response=await ExamService.getExamPaper(id)
  Object.assign(examInfo,response.data)
}

// 组件挂载时初始化
onMounted(() => {
  // 如果有传入的试卷信息数据，则更新examInfo
  currentPaperId.value=route.params.id;
  console.log("currentPaperId",currentPaperId);

  loadExamPaper(currentPaperId.value);

  // if (props.examInfoData && Object.keys(props.examInfoData).length > 0) {
  //   Object.assign(examInfo, props.examInfoData);
  // }

  // 初始化日期时间选择器的默认值
  const now = new Date();
  const tomorrow = new Date(now);
  tomorrow.setDate(tomorrow.getDate() + 1);

  // 格式化为datetime-local输入框所需的格式：YYYY-MM-DDThh:mm
  startTime.value = formatDateForInput(now);
  endTime.value = formatDateForInput(tomorrow);
});

// 格式化日期为datetime-local输入框格式
const formatDateForInput = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}-${month}-${day}T${hours}:${minutes}`;
};

// 验证时间范围
const validateTimeRange = () => {
  if (startTime.value && endTime.value) {
    const start = new Date(startTime.value);
    const end = new Date(endTime.value);

    if (start >= end) {
      // 如果开始时间大于或等于结束时间，将结束时间设置为开始时间后一天
      const newEnd = new Date(start);
      newEnd.setDate(newEnd.getDate() + 1);
      endTime.value = formatDateForInput(newEnd);
    }
  }
};
const saveAll =async () => {
    const data={
      title:examName.value,
      startTime:startTime.value,
      endTime:endTime.value,
      passScore:passingScore.value,
      duration:examDuration.value,
      chance:attemptLimit.value,
      lateMax:lateTime.value,
      paperId:examInfo.id,
      totalScore:examInfo.score,
      openType:1
    }
 await  ExamService.addExam(data);
};
// 验证整数输入
const validateInteger = (field) => {
  // 移除非数字字符
  const value = eval(field).value;
  if (value === '') return;

  // 确保是整数
  const intValue = parseInt(value, 10);
  if (isNaN(intValue)) {
    eval(field).value = '';
  } else {
    eval(field).value = intValue.toString();
  }
};

// 增减按钮方法
const increasePassingScore = () => {
  passingScore.value = (parseInt(passingScore.value) + 1).toString();
};
const decreasePassingScore = () => {
  if (parseInt(passingScore.value) > 0) {
    passingScore.value = (parseInt(passingScore.value) - 1).toString();
  }
};

const increaseExamDuration = () => {
  examDuration.value = (parseInt(examDuration.value) + 5).toString();
};
const decreaseExamDuration = () => {
  if (parseInt(examDuration.value) > 5) {
    examDuration.value = (parseInt(examDuration.value) - 5).toString();
  }
};

const increaseAttemptLimit = () => {
  attemptLimit.value = (parseInt(attemptLimit.value) + 1).toString();
};
const decreaseAttemptLimit = () => {
  if (parseInt(attemptLimit.value) > 1) {
    attemptLimit.value = (parseInt(attemptLimit.value) - 1).toString();
  }
};

const increaseMinSubmitTime = () => {
  if (minSubmitTime.value === '') {
    minSubmitTime.value = '1';
  } else {
    minSubmitTime.value = (parseInt(minSubmitTime.value) + 1).toString();
  }
};
const decreaseMinSubmitTime = () => {
  if (minSubmitTime.value && parseInt(minSubmitTime.value) > 0) {
    minSubmitTime.value = (parseInt(minSubmitTime.value) - 1).toString();
  }
};

const increaseLateTime = () => {
  if (lateTime.value === '') {
    lateTime.value = '1';
  } else {
    lateTime.value = (parseInt(lateTime.value) + 1).toString();
  }
};
const decreaseLateTime = () => {
  if (lateTime.value && parseInt(lateTime.value) > 0) {
    lateTime.value = (parseInt(lateTime.value) - 1).toString();
  }
};
</script>

<style scoped>
.exam-config-container {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 左侧导航菜单 */
.nav-menu {
  width: 160px;
  background-color: white;
  border-right: 1px solid #e8e8e8;
}

.menu-title {
  font-size: 16px;
  font-weight: bold;
  padding: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-list li {
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.menu-list li:hover {
  background-color: #f0f0f0;
}

.menu-list li.active {
  color: #1aaa55;
  border-left: 3px solid #1aaa55;
  background-color: #f0f7f3;
}

/* 中间配置表单区域 */
.config-form {
  flex: 1;
  padding: 20px;
  background-color: white;
  margin: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.empty-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f9f9f9;
  border-radius: 4px;
  color: #909399;
}

.form-group {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}

.form-label {
  width: 100px;
  text-align: right;
  padding-right: 15px;
  font-size: 14px;
  line-height: 32px;
}

.required {
  color: #f56c6c;
  margin-right: 4px;
}

.form-input {
  flex: 1;
}

.form-input input,
.form-input select {
  width: 100%;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 14px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.form-input input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

.form-input input[type="number"]::-webkit-outer-spin-button,
.form-input input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-input select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.time-range {
  display: flex;
  align-items: center;
}

.time-input {
  position: relative;
  flex: 1;
}

.time-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #909399;
  z-index: 1;
}

.time-input input {
  padding-left: 30px;
}

.datetime-input {
  width: 100%;
  position: relative;
}

.time-separator {
  margin: 0 10px;
  color: #909399;
}

.number-input {
  display: flex;
  align-items: center;
  width: 200px;
}

.number-input input {
  width: 60px;
  text-align: center;
  margin: 0 5px;
}

.btn-decrease,
.btn-increase {
  width: 32px;
  height: 32px;
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  color: #606266;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-decrease {
  border-radius: 4px 0 0 4px;
}

.btn-increase {
  border-radius: 0 4px 4px 0;
}

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  font-size: 12px;
  margin-left: 8px;
  cursor: pointer;
}

/* 权限配置样式 */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.radio-item {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  margin-top: 3px;
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

.radio-label {
  font-weight: 500;
  margin-right: 10px;
}

.radio-desc {
  color: #909399;
  font-size: 12px;
}

.checkbox-group {
  display: flex;
  gap: 20px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  margin-right: 5px;
}

/* 邀请列表样式 */
.invite-list-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.invite-list-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #e8e8e8;
  background-color: #f9f9f9;
}

.btn-add-invite {
  background-color: #1aaa55;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0 15px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.icon-add {
  margin-right: 5px;
  font-weight: bold;
}

.invite-search input {
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  width: 200px;
}

.invite-list {
  max-height: 300px;
  overflow-y: auto;
}

.invite-table {
  width: 100%;
  border-collapse: collapse;
}

.invite-table th,
.invite-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.invite-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 20px 0;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.status-sent {
  background-color: #e1f3d8;
  color: #67c23a;
}

.status-pending {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.status-accepted {
  background-color: #d9ecff;
  color: #409eff;
}

.btn-action {
  background: none;
  border: none;
  color: #409eff;
  cursor: pointer;
  margin-right: 10px;
  font-size: 12px;
}

.btn-delete {
  color: #f56c6c;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 4px;
  width: 400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.btn-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #909399;
  cursor: pointer;
}

.modal-body {
  padding: 20px;
}

.modal-body .form-group {
  margin-bottom: 15px;
  display: block;
}

.modal-body label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #606266;
}

.modal-footer {
  padding: 10px 20px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-cancel {
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.btn-confirm {
  background-color: #1aaa55;
  color: white;
  border: none;
}

.btn-cancel,
.btn-confirm {
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* 右侧试卷信息 */
.exam-info {
  width: 280px;
  background-color: white;
  margin: 15px 15px 15px 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.info-title {
  font-size: 16px;
  font-weight: bold;
  padding: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.info-content {
  padding: 15px;
}

.info-item {
  margin-bottom: 12px;
  font-size: 14px;
  display: flex;
}

.info-label {
  color: #606266;
  width: 80px;
}

.info-value {
  color: #303133;
  flex: 1;
}

/* 保存按钮 */
.form-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}

.btn-save {
  background-color: #1aaa55;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
}

.btn-save:hover {
  background-color: #159848;
}
</style>
